import React, {Component} from 'react'
import Cart from './cart';

export default class product extends Component {
    state = {
        productList: [
            {
                _id: 1,
                name: 'Python实战开发',
                dec: '精通Python学习指南',
                imgSrc: './1.png',
                count: 1,
                price: 10
            }, {
                _id: 2,
                name: 'JavaScript实战开发',
                dec: '精通JavaScript学习指南',
                imgSrc: './1.png',
                count: 1,
                price: 12
            }, {
                _id: 3,
                name: 'H5实战开发',
                dec: '精通H5学习指南',
                imgSrc: './1.png',
                count: 1,
                price: 14
            }, {
                _id: 4,
                name: '测试框架实战开发',
                dec: '精通测试框架学习指南',
                imgSrc: './1.png',
                count: 1,
                price: 16
            },
        ],
        cartList: [
            {
                _id: 1,
                name: 'Python实战开发',
                dec: '精通Python学习指南',
                count: 1,
                imgSrc: './1.png',
                price: 10
            }
        ]
    }
    addProduct(_id) {
        let {cartList, productList} = this.state;
        if (!cartList.some(j => j._id === _id)) {
            cartList.push(productList.find((a) => a._id === _id))
            this.setState({cartList})
        } else {
            alert('商品已经在购物车中了！')
        }
    }
    operate = (val, _id) => {
        let {cartList} = this.state;
        if (val === '-1') {
            cartList.find(a => a._id === _id).count --;
        } else if (val === '1') {
            cartList.find(a => a._id === _id).count ++;
        } else if (val === '3') {
            const i = cartList.indexOf(cartList.find(a => a._id === _id));
            cartList.splice(i, 1)
        }
        this.setState({cartList})
    }
    productArr() {
        return this.state.productList.map((item, index) => {
            return (
                <div key={index}
                    className="product-item">
                    <img className="product-img"
                        src={
                            require(`${
                                item.imgSrc
                            }`).default
                        }
                        alt=""/>
                    <p className="product-p">
                        {
                        item.name
                    }</p>
                    <p className="product-p">
                        {
                        item.dec
                    }</p>
                    <button onClick={
                        () => {
                            this.addProduct(item._id)
                        }
                    }>加入购物车</button>
                </div>
            )
        })
    }
    render() {
        return (
            <div className='product'>
                <h1>产品</h1>
                <div className="product-big">
                    {
                    this.productArr()
                }</div>
                <Cart cartList={
                        this.state.cartList
                    }
                    operate={
                        this.operate
                }></Cart>
            </div>
        )
    }
}
